<template>
  <view class="forget-box">
    <view class="forget-box-center">
      <topCard title="找回密码" subtitle="验证你的手机号并重设密码"></topCard>
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 30rpx; flex: 0.1"
        :styles="styles"
        type="number"
        :inputBorder="false"
        v-model="inputPhone"
        placeholder="输入手机号"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <view class="input-box">
        <view class="code">
          <uni-easyinput
            class="login"
            :styles="styles"
            type="number"
            :inputBorder="false"
            v-model="inputCode"
            placeholder="输入验证码"
            placeholderStyle="color: #ffffff;font-size: 31rpx;"
          />
        </view>
        <button class="in-btn" @click="startCountdown" :disabled="disabled">
          {{ disabled == true ? countdown + "秒后发送" : "发送验证码" }}
        </button>
      </view>
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 30rpx;flex: 0.1"
        :styles="styles"
        type="password"
        :inputBorder="false"
        v-model="inputNewPsd"
        placeholder="请输入密码"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      />
      <uni-easyinput
        class="login"
        styleOther="width: 83vw; margin-top: 30rpx;flex: 0.1"
        :styles="styles"
        type="password"
        :inputBorder="false"
        v-model="confirmPsd"
        placeholder="再次确认密码"
        placeholderStyle="color: #ffffff;font-size: 31rpx;"
      ></uni-easyinput>
    </view>
    <view class="forget-box-bottom" @click="forget">提交</view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { usergGetSms, getUUID, forgetPsd } from "@/api/login";
import topCard from "./components/top-card/top-card.vue";

const { proxy } = getCurrentInstance();
const list = ref([
  {
    defaultText: "输入手机号",
  },
  {
    defaultText: "输入验证码",
    testFlag: true,
  },
  {
    defaultText: "输入新设置的密码",
  },
]);
const inputPhone = ref("");
const inputCode = ref("");
const inputNewPsd = ref("");
const confirmPsd = ref("");

const uuID = ref("");
const countdown = ref(30);
const disabled = ref(false);
const styles = ref({
  color: "#ffffff",
  backgroundColor: "#ffffff33",
  borderColor: "#ffffff",
});
function isValidChinesePhoneNumber(phoneNumber) {
    return /^1[3-9]\d{9}$/.test(phoneNumber);
}
function startCountdown() {
  if (inputPhone.value == "") {
    proxy.modal.msg("请输入手机号");
    return;
  }else if (!isValidChinesePhoneNumber(inputPhone.value)) {
    proxy.modal.msg("请输入正确的手机号");
    return;
  }
  // 获取幂等值
  getUUID({
    phone: inputPhone.value,
  }).then((res) => {
    // console.log(res.data);
    uuID.value = res.data;
    // 获取短信验证码
    usergGetSms({
      mdKey: uuID.value,
      phoneNumberArray: [inputPhone.value],
      templateId: 2053183,
    }).then((res) => {
      if (res.code == 200) {
        countdown.value = 30; // 设置倒计时初始值
        disabled.value = true;
        const timer = setInterval(() => {
          if (countdown.value > 0) {
            countdown.value--; // 每秒减1
          } else {
            clearInterval(timer); // 倒计时结束，清除定时器
            disabled.value = false;
          }
        }, 1000);
      }
      console.log(res);
      proxy.modal.msg(res.msg);
    });
    console.log(uuID.value);
  });
}
function forget() {
  if (inputPhone.value == "") {
    proxy.modal.msg("请输入手机号");
    return;
  }
  if (inputCode.value == "") {
    proxy.modal.msg("请输入验证码");
    return;
  }
  if (inputNewPsd.value == "") {
    proxy.modal.msg("请输入新密码");
    return;
  }
  if (confirmPsd.value !== inputNewPsd.value) {
    proxy.modal.msg("两次输入的密码不一致");
    return;
  }
  forgetPsd({
    phone: inputPhone.value,
    code: inputCode.value,
    newPassword: inputNewPsd.value,
    affirmPassword: confirmPsd.value,
  }).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        // title: JSON.stringify(res),
        title: "密码重置成功",
        duration: 2000,
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/package_login/pages/login/login",
        });
      }, 2000);
    } else {
    }
  });
}
</script>

<style lang="less" scoped>
.forget-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: @login-img;
  background-repeat: no-repeat;
  background-position: center center;
  justify-content: space-around;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  .forget-box-center {
  }
  .forget-box-bottom {
    width: 80vw;
    height: 5vh;
    color: #ffffff;
    border-radius: 6rpx;
    font-family: "ali";
    font-size: 31.3rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    background-color: #5590f6;
  }
}
.input-box {
  font-family: "ali";
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  position: relative;
  .code {
    width: 56vw;
  }
  .uni-input-placeholder {
    color: #ffffff;
  }
  .in-btn {
    width: 25vw;
    /* #ifdef MP-WEIXIN */
    height: 35px;
    line-height: 35px;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    height: 70rpx;
    line-height: 70rpx;
    /* #endif */
    background-color: #5590f6;
    color: white;
    position: absolute;
    top: auto;
    font-size: 23.48rpx;
    right: 0;
  }
}
</style>
